<template>
    <div class="kindList">
        <ul class="top">
            
            <van-dropdown-menu class="menu" active-color="#1989fa">
                <!-- 分类 -->
                <!-- <div class="kinds"> {{kinds}} </div> -->
                <van-dropdown-item  :title="title"  ref="checkbox">
                    <ul class="left">
                        <li :class=" {'category':true,'selKind':selKind == index} "
                        v-for="(item,index) in category" :key="index" 
                         @click="shopk(index)"> 
                            <img :src="item.image_url | setimgurl" alt="" class="imgs" >
                            <span>{{item.name}}</span>  
                            <span class="count"> {{item.count}} </span>
                            <i class="iconfont icon-fanhui1"></i>
                        </li>
                    </ul>
                    <!-- 分类右侧列表 -->
                    <ul class="right" >
                        <li v-for="(item2,index2) in rlist" :key="index2" :class="{'foodsList':true,'foodOne':foodOne==index2 }" @click="selFood(index2,item2.id)"  > 
                            <div class="foodTxt">{{item2.name}}</div> 
                            <div class="foodNum"> {{item2.count}} </div>
                        </li>
                    </ul>
                </van-dropdown-item>

                <van-dropdown-item title="排序" class="sort" ref="sort">
                    <ul>
                        <li v-for="(item3,index3) in option1" :key="index3" :class="{'sortList':true,'foodOne':selSort==index3}" @click="sortAct(index3)">
                            <i class="iconfont icon-paixu"></i>
                            <span> {{item3.text}} </span>
                        </li>
                    </ul>
                </van-dropdown-item>

                <van-dropdown-item title="筛选" class="screen" ref="screen">
                    <div class="give">
                        <p class="giveWay">配送方式</p>
                        <p :class="{'bird':true,'selW':giveWay[0] ? giveWay[0].__v :''}" @click="give()"> {{giveWay[0] ? giveWay[0].text :''}} </p>
                    </div>
                    <div class="attr">
                        <p class="attrTit">商家属性（可以多选）</p>
                        <p v-for="(item4,index4) in attrDatas" :key="index4" :class="{'propery':true,'selattr':item4.__v}" @click="attrAct(index4)"> 
                            <i></i>
                            <span :style="{'color':'#'+item4.icon_color,'border':'1px solid #'+item4.icon_color,'borderRadius':'3px'}"> {{item4.icon_name}} </span>
                             <span>{{item4.name}}</span> 
                        </p>
                    </div>
                    <div class="butt">
                        <div class="allDel" @click="alldelete">清空</div>
                        <div class="sure" @click="ok">
                            确定
                            <span v-if="selNumber > 0"> ({{selNumber}}) </span>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
           
        </ul>
    </div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Popup);
export default {
    data:function() {
        return {
            title:JSON.parse(localStorage.getItem('title')) ,
            kinds:"分类",
            show:false,
            category:[],
            url:'https://fuss10.elemecdn.com',
            selKind:'',
            foodOne:0,
            selSort:0,
            rlist:[],
            checked:false,
            value1: 0,
            option1: [
                { text: '起送价', value: 0 },
                { text: '配送速度', value: 1 },
                { text: '评分最高', value: 2 },
                { text: '智能排序', value: 3 },
                { text: '距离最近', value: 4 },
                { text: '销量最高', value: 5 },
            ],
            giveWay:[],
            attrDatas:[],
            sortData:[],
            selNumber:0
        }
    },
    watch:{
        'title':{
            handler:function(){
                // this.$store.commit("nav/changeNavTitle",this.title)
                console.log(this.title)
            }
            
        },
        deep:true,
      immediate:true
    },
    created() {
        // console.log(this.title)
        this.$store.commit("nav/changeNavTitle",this.title)
        this.$axios.get('https://elm.cangdu.org/shopping/v2/restaurant/category',{

                }).then(res=>{
                    this.category = res.data;
                    // console.log(this.category)
                }).catch(err=>console.log(err));
        // 获取配送方式
        this.$axios.get('https://elm.cangdu.org/shopping/v1/restaurants/delivery_modes',{
                
                }).then(res=>{
                    console.log(res)
                    this.giveWay = res.data;
                }).catch(err=>console.log(err));
        // 获取商家属性列表
        this.$axios.get('https://elm.cangdu.org/shopping/v1/restaurants/activity_attributes',{
                
                }).then(res=>{
                    
                    this.attrDatas = res.data;
                }).catch(err=>console.log(err));
    },
    methods: {
        kindAction(){

        },
        shopk(index){
            // console.log(index)
            this.selKind = index;
            this.rlist = this.category[this.selKind].sub_categories;
            // console.log(this.rlist)
        },
        // 点击分类右侧食物列表
        selFood(index2,id){
            this.foodOne = index2;
            this.$refs.checkbox.toggle();
            // console.log(id)
            this.$axios.get('https://elm.cangdu.org/shopping/restaurants',{
                params:{
                    latitude: 31.38098,
                    longitude: 121.50146,
                    restaurant_category_ids:[id],  
                }
                }).then(res=>{
                    // console.log(res.data)
                    this.$emit('sortD',res.data)
                }).catch(err=>console.log(err));

        },
        sortAct(index3){
            this.selSort = index3;
            this.$refs.sort.toggle();
            console.log(index3)
            this.$axios.get('https://elm.cangdu.org/shopping/restaurants',{
            params:{
                latitude: 31.38098,
                longitude: 121.50146,
                order_by :index3
            }
        }).then(res=>{
            this.sortData = res.data;
            console.log(this.sortData)
            this.$emit('sortD',this.sortData)
        }).catch(err=>console.log(err))
        },
        attrAct(index4){
            console.log(index4)
            if(this.attrDatas[index4].__v == 0){
                this.attrDatas[index4].__v =1;
                this.selNumber++;
            }else{
                this.attrDatas[index4].__v = 0;
                this.selNumber--;
            }
        },
        give(){
            if(this.giveWay[0].__v==0){
                this.giveWay[0].__v =1;
                this.selNumber++;
            }else{
                this.giveWay[0].__v =0;
                this.selNumber--;
            }
        },
        ok(){
            this.$refs.screen.toggle();
        },
        alldelete(){
            this.selNumber = 0;
        }
    },
    
}
</script>
<style lang="less">
    .kindList{
        .foodOne{
                color: #3190e8;
            }
        .center{
            font-weight: 900;
        }
        .top{
            background-color: white;
            font-size: 13px;
            color: #666666;
            // line-height: 20px;
            display: flex;
            justify-content: space-around;
            // padding: 10px 0;
            box-sizing: border-box;
            border-bottom: 1px solid #eeeeee;
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            z-index: 100;
        }
        
        .left{
            float: left;
            width: 50%;
            // padding-left:15px;
            box-sizing: border-box;
            background-color: #f1f1f1;
            position: fixed;
            li{
                padding-left:15px;
            }
            .selKind{
                background-color: white;
            }
            .category{
                font-size: 13px;
                line-height: 40px;
            }
            .imgs{
                width: 15px;
                margin-right: 10px;
            }
            .count{
                margin-left: 25px;
                color: white;
                background-color: #cccccc;
                padding: 1px;
                border-radius: 6px;
            }
            i{
                float: right;
                color: #cccccc;
            }
        }
        .menu{
            width: 100%;
            position: relative;
        }
        .kinds{
            position: absolute;
            top: 0;
            left: 0;
        }
        .van-dropdown-menu__bar{
            height: 40px;
            padding: 8px 0;
            box-sizing: border-box;
        }
        .van-dropdown-menu__item{
            border-right: 1px solid #eeeeee;
        }
        .right{
            float: right;
            height: 360px;
            width: 50%;
            
            .foodsList{
                overflow: hidden;
                margin-left: 11.5px;
                padding-right: 12px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #e4e4e4;
                .foodTxt{
                    float: left;
                }
                .foodNum{
                    float: right;
                }
            }
            
        }
        .sort{
            .sortList{
                height: 55px;
                margin-left: 30px;
                line-height: 55px;
                border-bottom: 1px solid #e4e4e4;
                .iconfont{
                    color: #3190e8;
                    margin-right: 10px;
                }
                
            }
        }
        .screen{
            .give{
                padding-left: 10px;
                .giveWay{
                    line-height: 35px;
                }
                .bird{
                    width: 110px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    border: 1px solid #eeeeee;
                    color: #333333;
                }
                .selW{
                    color: #3190e8;
                }
            }
            .attr{
                padding-left: 10px;
                .attrTit{
                    line-height: 35px;
                }
                .propery{
                    width: 110px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    border: 1px solid #eeeeee;
                    color: #333333;
                    display: inline-block;
                    margin: 0 8px 10px 0;
                }
                .selattr{
                    color: #3190e8;
                }
            }
            .butt{
                // width: 100%;
                // height: 50px;
                background-color: #f1f1f1;
                margin-top: 25px;
                padding: 5px;
                font-size: 18px;
                .allDel{
                    background-color: #fff;
                    text-align: center;
                    width: 176.95px;
                    line-height: 42px;
                    margin-right: 11px;
                    display: inline-block;
                    border-radius: 5px;
                }
                .sure{
                    background-color: #56d176;
                    text-align: center;
                    width: 176.95px;
                    line-height: 42px;
                    display: inline-block;
                    color: #ffffff;
                    border-radius: 5px;
                }
            }
            
        }
    }
    
</style>